<template>
  <a-card title="通用表单">
    <vp-dynamic-form
      :formSchema="formSchema"
      :fields="fields"
      ref="formRef"
      :key="key"
    ></vp-dynamic-form>
    <a-button @click="test">测试</a-button>
  </a-card>
</template>
<script lang="ts" setup>
import { reactive, ref, createVNode, getCurrentInstance } from "vue";
import { useTinymce, useModal } from "@vue-ant-plus/hooks";
import { VpDynamicForm } from "@vue-ant-plus/components";
let key = ref<any>(1);
const formRef = ref<any>(null);
const { getWords } = useTinymce();
const fields = ref<any>({
  Radio: 1,
});

const formInstance = getCurrentInstance();
const isExpand = ref<boolean>(false);
const formSchema = ref<any>({
  formItem: [
    {
      type: "Tinymce",
      label: "编辑器",
      field: "name2",
      value: "",
      defaultContent: "<h2>123</h2>",
      props: {
        placeholder: "请输入任务名称",
      },
      rules: [
        {
          required: true,
          message: "请输入用户名1",
          trigger: "blur",
        },
        {
          min: 3,
          max: 5,
          transform: (value) => {
            console.log(getWords(value));
            return getWords(value);
          },
          message: "Length should be 3 to 5",
          trigger: "blur",
        },
      ],
    },
    {
      type: "Input",
      label: "大萨达奥",
      field: "name",
      value: "",
      props: {
        placeholder: "请输入任务名称",
      },
      rules: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
    },
    {
      type: "InputNumber",
      label: "大萨达奥",
      field: "name1",
      value: "",
      props: {
        placeholder: "请输入任务名称",
      },
      rules: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
    },
    {
      type: "Radio",
      label: "Radio",
      field: "Radio",
      value: "",
      props: {
        placeholder: "请输入任务名称",
      },
      options: [
        {
          label: "123",
          value: 1,
        },
        {
          label: "Dddasd",
          value: 2,
        },
      ],
    },
    {
      type: "Checkbox",
      label: "Checkbox",
      field: "Checkbox",
      value: [],
      props: {
        placeholder: "请输入任务名称",
      },
      options: [
        {
          label: "123",
          value: 1,
        },
        {
          label: "Dddasd",
          value: 2,
        },
      ],
    },
    {
      type: "Cascader",
      label: "Cascader",
      field: "Cascader",
      value: [],
      props: {
        placeholder: "请输入任务名称",
      },
    },
    {
      type: "Select",
      label: "Select1",
      field: "Select",
      value: [],
      props: {
        placeholder: "请输入任务名称",
        // slots: {
        //   dropdownRender: () => 123,
        // },
      },
      // options: [
      //   {
      //     label: "123",
      //     value: 1,
      //   },
      //   {
      //     label: "Dddasd",
      //     value: 2,
      //   },
      // ],
      options: [
        {
          label: "Manager",
          options: [
            {
              value: "jack",
              label: "Jack",
            },
            {
              value: "lucy",
              label: "Lucy",
            },
          ],
        },
        {
          label: "Engineer",
          options: [
            {
              value: "yiminghe",
              label: "Yiminghe",
            },
          ],
        },
        {
          label: "Engineer",
          options: [
            {
              value: "yiminghe",
              label: "Yiminghe",
            },
          ],
        },
        {
          label: "Engineer",
          options: [
            {
              value: "yiminghe",
              label: "Yiminghe",
            },
          ],
        },
        {
          label: "Engineer",
          options: [
            {
              value: "yiminghe",
              label: "Yiminghe",
            },
          ],
        },
        {
          label: "Engineer",
          options: [
            {
              value: "yiminghe",
              label: "Yiminghe",
            },
          ],
        },
      ],
    },
    {
      type: "Switch",
      label: "Switch",
      field: "Switch",
      value: false,
      props: {
        placeholder: "请输入任务名称",
      },
      onChange: (val) => {
        isExpand.value = val;
      },
      rules: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
    },
    {
      type: "RangePicker",
      label: "RangePicker",
      field: "RangePicker",
      value: ["2022-10-05 16:59:31", "2022-10-09 16:59:31"],
      rules: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
    },
    {
      type: "DatePicker",
      label: "DatePicker",
      field: "DatePicker",
      value: "",
      props: {
        placeholder: "请输入任务名称",
      },
      isHide: () => isExpand.value,
      rules: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
    },
    {
      type: "TimePicker",
      label: "TimePicker",
      field: "TimePicker",
      value: "",
      props: {
        placeholder: "请输入任务名称",
      },
      rules: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
    },
    {
      type: "Slider",
      label: "Slider",
      field: "Slider",
      value: 0,
      props: {
        placeholder: "请输入任务名称",
      },
      rules: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
    },
    {
      type: "Rate",
      label: "Rate",
      field: "Rate",
      value: 0,
      props: {
        placeholder: "请输入任务名称",
      },
      rules: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
    },
    {
      type: "Upload",
      label: "Upload",
      field: "Upload",
      value: "",
      props: {
        name: "avatar",
        listType: "picture-card",
        slots: {
          //default: () => createVNode("div", {}, 123),
        },
        isShowUploadBtn: () => {
          return false;
        },
      },
      rules: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
    },
  ],
});
const test = () => {
  formSchema.value.formItem[1].disabled = true;
  formSchema.value.formItem[5].options = [
    {
      label: "打算",
      value: 1,
    },
  ];
  // setTimeout(() => {
  //   formSchema.value.formItem[5].options = [
  //     {
  //       label: "打算",
  //       value: 1,
  //     },
  //   ];
  // }, 3);

  //formInstance?.update();
  //key.value = 2;
  formRef.value.validated();
  console.log(formRef.value.getValues());
};
</script>
